﻿@using RMS.EF.Model
@{
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<div class="panel-body">
    <div class="row">
        <div class="panel panel-default">
            <div class="panel-heading">@("Search condition")</div>
            <div class="panel-body">
                <form id="searchForm" class="form-inline" role="form" onsubmit="search(); return false;">
                    <div class="form-group">
                        <label for="searchValue">@("Search")</label>
                        <input type="text" class="form-control" id="searchValue" name="searchValue" maxlength="50" placeholder="@("Name or domain")" />
                    </div>
                    <div class="form-group">
                        <label for="status">@("Status")</label>
                        <select id="status" name="status" class="form-control">
                            <option value="@(E_Status.All)">--@("All")--</option>
                            <option value="@(E_Status.Disable)">@("Disable")</option>
                            <option value="@(E_Status.Enable)">@("Enable")</option>
                        </select>
                    </div>
                    <button type="submit" class="btn btn-primary">@("Search")</button>
                </form>
            </div>
        </div>
    </div>
    <div class="row">
        <div id="toolbar" class="btn-group" role="group" style="margin-bottom:10px;">
            <button type="button" class="btn btn-success" onclick="add()">
                <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>@("Add")
            </button>
            <button type="button" class="btn btn-danger" onclick="multidel()">
                <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>@("Delete")
            </button>
        </div>
    </div>
    <div class="row">
        <div class="dataTable_wrapper">
            <table class="table table-bordered table-striped table-hover" id="mainTable"></table>
        </div>
    </div>
</div>

@section scripts{
    <!--文字信息-->
    <script>
        var tableurl = "@Url.Action("ListGetData")";
        var delurl = "@Url.Action("Delete")";
        var editurl = "@Url.Action("Edit")";
        var title = {
            Id: "@("ID")",
            Name: "@("Name")",
            Domain: "@("Domain")",
            Ordering: "@("Ordering")",
            Status: "@("Status")",
            CreationTime: "@("Creation time")",
            LastUpdateTime: "@("Last update time")",
            Operation: "@("Operation")"
        };
        var msg = {
            sel: "@("Please select the data first")",
            delconfirm: "@("Are you sure you want to delete the data?")",
            add: "@("Add program")",
            edit: "@("Edit program")",
            del:"@("Delete program")",
            multidelconfirm: "@("Are you sure you want to delete the selected data?")",
            disable:"@("Disable")",
            enable:"@("Enable")",
        };
    </script>
    <script>
    var table;
    //表格初始化
    $(function () {
        var data = {};
        $("#searchForm").serializeArray().map(function (x) { data[x.name] = x.value; });
        table = $("#mainTable").datatablesSet({
            ajax: { url: tableurl, data: data },
            ordering: true,
            order: [[ 1, 'asc' ]],
            columns: [
                      {
                          data: 'Id', title: '<input type="checkbox" id="sel_all" onclick="sel_all()"/>', className: "text-center", orderable: false,width:"10px",
                          createdCell: function (cell, cellData, rowData, row, col) {
                              $(cell).html('<input type="checkbox" id="sel_' + cellData + '" name="selId" value="' + cellData + '" />');
                          }
                      },
                      {
                          data: 'Id', title: title.Id
                      },
                      {
                          data: 'Name', title: title.Name
                      },
                      {
                          data: 'Domain', title: title.Domain
                      },
                      {
                          data: 'Ordering', title: title.Ordering
                      },
                      {
                          data: 'Status', title: title.Status, createdCell: function (cell, cellData, rowData, row, col) {
                              switch (cellData) {
                                  case 0:
                                      $(cell).html(msg.disable);
                                      break;
                                  case 1:
                                      $(cell).html(msg.enable);
                                      break;
                                  default:
                                      break;
                              }
                          }
                      },
                      {
                          data: 'CreationTime', title: title.CreationTime, createdCell: function (cell, cellData, rowData, row, col) {
                              $(cell).html($.datetime.Format(cellData, 'yyyy-MM-dd hh:mm:ss'));
                          }
                      },
                      {
                          data: 'LastUpdateTime', title: title.LastUpdateTime, createdCell: function (cell, cellData, rowData, row, col) {
                              $(cell).html($.datetime.Format(cellData, 'yyyy-MM-dd hh:mm:ss'));
                          }
                      },
                      {
                          data: 'Id', title: title.Operation, orderable: false, className: "text-center", createdCell: function (cell, cellData, rowData, row, col) {
                              $(cell).html("<a href='javascript:void(0);' title='" + msg.edit + "' onclick='edit(" + cellData + ")'><span class='glyphicon glyphicon-pencil' aria-hidden='true'></a>")
                                .append("&nbsp;|&nbsp;")
                                .append("<a href='javascript:void(0);' title='" + msg.del + "' onclick='del(" + cellData + ")'><span class='glyphicon glyphicon-remove' aria-hidden='true'></a>");
                          }
                      }
            ]
        }).on('xhr.dt', function () {//调用ajax获取数据时清除全选按钮选中状态
            $("#sel_all").prop("checked", false);
        });
    });
    //表格搜索
    function search() {
        var data = {};
        $("#searchForm").serializeArray().map(function (x) { data[x.name] = x.value; });
        $("#mainTable").datatablesReAjax(tableurl, data, null, true);
    }
    //删除
    function del(id) {
        $.confirmAjax(msg.delconfirm, { url: delurl, data: { Id: id }, search: function () { table.ajax.reload(null, false); } });
    }
    //新增
    function add() {
        $.modalBox(msg.add, { url: editurl, search: function () { table.ajax.reload(null, false); } });
    }
    //修改
    function edit(id) {
        $.modalBox(msg.edit, { url: editurl, data: { id: id }, search: function () { table.ajax.reload(null, false); } });
    }
    //列表全选
    function sel_all() {
        $("#mainTable").find("input:checkbox").each(function () {
            $(this).prop("checked", $("#sel_all").is(':checked'));
        });
    }
    //批量删除(其他批量操作也可参考)
    function multidel() {
        var selarry=[];
        $("input:checkbox[name='selId']:checked").each(function () {
            selarry.push($(this).val());
        });
        if (selarry.length>0) {
            var selId = selarry.join(',');
            $.confirmAjax(msg.multidelconfirm, { url: delurl, data: { id: selId }, search: function () { table.ajax.reload(null, false); } });
        } else {
            toastr.warning(msg.sel);
        }
    }
    </script>
}
